<template>
  <div class="background-image">
    <div class="content">
      <div class="main">
        <div class="left"></div>
        <div class="right">
          <div class="img">
            <img src="../../assets/NJUST.jpeg" />
          </div>
          <div class="choose">
            <ul>
              <li class="li1"><router-link to="/login"><span>支持人员</span></router-link></li>
              <li class="li2"><router-link to="/login2"><span>检测人员</span></router-link></li>
            </ul>
          </div>
          <div class="con">
            <form @submit.prevent="validateForm">
              <div class="text">
                <table class="table">
                  <tr>
                    <td><a>用户名:</a></td>
                    <td>
                      <input type="text" v-model="username" class="input" placeholder="请输入您的用户名">
                      <div v-if="errors.username" class="error">{{ errors.username }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td><a>密 码:</a></td>
                    <td>
                      <input type="password" v-model="password" class="input" placeholder="请输入密码">
                      <div v-if="errors.password" class="error">{{ errors.password }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td><a>验证码:</a></td>
                    <td>
                      <input type="text" v-model="verificationCode" class="input" placeholder="请输入验证码">
                      <div v-if="errors.verificationCode" class="error">{{ errors.verificationCode }}</div>
                    </td>
                    <td>
                      <div id="code" @click="createCode" class="pseudo-button">
                        <span v-for="(char, index) in code" :key="index" :style="{ color: codeColors[index] }">{{ char }}</span>
                      </div>
                    </td>
                  </tr>
                </table>
                <div class="forget">
  <li class="li1"><router-link to="/password"><span>忘记密码？</span></router-link></li>
  </div>
  <input type="submit" value="登录" id="submit" class="login" />
  </div>
  </form>
  </div>
  </div>
  </div>
  </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        verificationCode: '',
        code: '',
        errors: {},
        codeColors: [], // 存储每个字符的颜色
      };
    },
    methods: {
      createCode() {
        const codeLength = 4;
        // const random = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'.split('');
        const random = '0123456789'.split('');
        
        this.code = '';
        this.codeColors = []; // 重置颜色数组
        for (let i = 0; i < codeLength; i++) {
          const index = Math.floor(Math.random() * random.length);
          this.code += random[index];
          this.codeColors.push('#' + Math.floor(Math.random() * 16777215).toString(16)); // 生成随机颜色
        }
      },
      validateForm() {
        this.errors = {};
        if (!this.username) {
          this.errors.username = '该项未填写';
        }
        if (!this.password) {
          this.errors.password = '该项未填写';
        }
        if (!this.verificationCode) {
          this.errors.verificationCode = '该项未填写';
        }
        if (this.verificationCode !== this.code) {
          this.errors.verificationCode = '验证码错误';
          this.createCode();
          this.verificationCode = '';
          return;
        }
        if (Object.keys(this.errors).length === 0) {
          console.log(this.username);
            this.$http.post('/login', {
        username: this.username,
        password: this.password
      })
      .then(response=> {
        console.log(response);
           if(response.data == 'jHome.html'){
            // window.location.href = 'http://localhost:8080/';
            this.$router.push('/home1');
          }
          else if(response.data == 'zHome.html'){
            window.location.href = 'http://localhost:8080/dashboard';//改为支持人员主页
          }
          else if(response.data == '用户名或密码错误'){
            this.errors.verificationCode = '用户名或密码错误';
          }

      }).catch(error=> {
        // 处理错误情况
        console.log(error);
      });// 使用编程式导航跳转到 /dashboard
        }
      }
    },
    mounted() {
      this.createCode();
    }
  };
</script>
<style scoped>
  .background-image {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff; /* 背景色，可根据需要调整 */
    z-index: 0; /* 背景层 */
  }

    .background-image::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("../../assets/Register_bg.jpg") center/cover no-repeat;
      z-index: -1; /* 确保伪元素在背景层之下 */
      filter: blur(8px);
    }

  .content {
    display: flex; /* 使.content成为flex容器 */
    justify-content: center; /* 水平居中main元素 */
    align-items: center; /* 垂直居中main元素 */
    height: 100%; /* 使.content的高度占满其父元素 */
    /* 如果需要，可以设置width: 100%来使.content宽度占满其父元素 */
  }

    .content .main {
      width: 1000px;
      height: 600px;
      background-color: #FFFFFF;
      border-radius: 10px;
    }

      .content .main .left {
        margin: 0;
        padding: 0;
        width: 55%;
        height: 100%;
        background-image: url("../../assets/Register_bg.jpg");
        background-size: cover;
        background-position: 65%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        float: left;
      }

      .content .main .right {
        width: 45%;
        height: 100%;
        float: left;
      }

        .content .main .right .img {
          margin-top: 30px;
          width: 100%;
          height: 10%;
          float: left;
        }

          .content .main .right .img img {
            margin-left: 25px;
            height: 100px;
            width: 380px;
            float: left;
          }

  .choose {
    width: 100%;
    margin-top: 50px;
    margin-left: 30px;
    float: left;
  }

    .choose li {
      float: left;
      list-style: none;
      margin-right: 1px;
    }

    .choose .li1 a {
      display: block;
      text-decoration: none;
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 37px;
      background: deepskyblue;
      color: white;
      font-size: 20px;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }

    .choose .li2 a {
      display: block;
      text-decoration: none;
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 37px;
      background: #dfdfdf;
      color: black;
      font-size: 20px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }

      .choose .li2 a:hover {
        background: deepskyblue;
        color: white;
      }

  .con {
    float: left;
    margin-top: 30px;
    margin-left: 30px;
  }

  .table a {
    font-family: KaiTi;
    font-size: 25px;
    font-weight: bolder;
  }

  .input {
    width: 180px;
    padding: 10px;
    border: none;
    border-radius: 4px;
    box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
    outline: none;
    color: dimgray;
  }

  .text .table {
    width: 400px;
    height: 200px;
    margin-top: 15px;
  }

  .forget li {
    margin-top: 10px;
    margin-left: 320px;
    float: left;
    color: grey;
    font-size: 16px;
    display: block;
  }

  .forget a {
    text-decoration: none; /* 去除下划线 */
    color: gray; /* 设置链接颜色，可以是任何你想要的颜色 */
  }

    .forget a:visited {
      color: gray; /* 访问过的链接颜色保持不变 */
    }

  .login {
    margin-top: 5%;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    float: left;
    margin-left: 25%;
    font-size: 25px;
    background-color: #00A2E8;
    color: #FFFFFF;
    border-radius: 10px;
    border: 1px;
    font-weight: bold;
    letter-spacing: 20px;
  }

    .login:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      background-color: #9ED3F0;
      color: black;
      font-weight: bolder;
    }

  .error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
  }

  .pseudo-button {
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid #dfdfdf;
    border-radius: 4px; /* 添加圆角边框 */
    background-color: #fff; /* 背景颜色 */
    cursor: pointer; /* 鼠标光标样式 */
    user-select: none; /* 防止文本被选中 */
    /* 以下是每个字符的样式 */
    font-style: italic;
  }

    .pseudo-button:hover {
      background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
      border-color: #ccc; /* 鼠标悬停时的边框颜色 */
    }
</style>
